<template>
  <el-container class="product-list-show">
    <!-- 商品列表 -->
    <div class="product-list">
      <div v-for="item in mockProductData" :key="item.id" class="product-item">
        <productItem :item="item" @showProduct="showProduct(item)" @pay="buyNow(item)" />
      </div>
    </div>

    <!-- 支付弹窗 -->
    <productPayDialog :isShow="isShowPayDialog" :item="selectedProduct" @close="resetDialog" />

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination background layout="prev, pager, next" :total="pagination.total" :page-size="pagination.pageSize"
        :current-page="pagination.currentPage" @current-change="handlePageChange" />
    </div>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import productItem from './components/productItem.vue';
import productPayDialog from './components/productPayDialog.vue';
import router from '@/router';
import axios from 'axios';

// 商品接口
interface ProductItem {
  id: number;
  name: string;
  info: string;
  price: string;
  discountPrice?: string;
  imgPath: string;
  num: number;
  limitNum: number;
  onSale: boolean;
  bossId: number;
  bossName: string;
  bossAvatar: string;
}

// 商品数据
const mockProductData = ref<ProductItem[]>([]);

// 分页数据
const pagination = ref({
  currentPage: 1,   // 当前页码
  pageSize: 10,     // 每页显示的条数
  total: 0,         // 总条数
});

// 获取商品数据
const fetchProductData = (pageNum: number, pageSize: number) => {
  axios.get('/api/products/all', { params: { pageNum, pageSize } })
    .then((res) => {
      const data = res.data.data;
      mockProductData.value = data.listData;  // 设置商品数据
      pagination.value.total = data.totalRecords;  // 更新总条数
    })
    .catch(error => {
      console.error('Error fetching products:', error);
    });
};

// 页面挂载时获取初始数据
onMounted(() => {
  fetchProductData(pagination.value.currentPage, pagination.value.pageSize);
});

// 处理分页切换
const handlePageChange = (newPage: number) => {
  pagination.value.currentPage = newPage;
  fetchProductData(newPage, pagination.value.pageSize);  // 请求新页数据
};

// 弹窗相关状态
const selectedProduct = ref<ProductItem | null>(null);  // 选中的商品
const isShowPayDialog = ref(false);

// 立即购买按钮
const buyNow = (item: ProductItem) => {
  selectedProduct.value = item;
  isShowPayDialog.value = true;
};

// 重置弹窗
const resetDialog = () => {
  isShowPayDialog.value = false;
};

// 查看商品事件
const showProduct = (selectedProduct: ProductItem) => {
  router.push(`/product_detail/${selectedProduct.id}`);
};
</script>

<style scoped>
.product-list-show {
  display: block;


  padding: 20px;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 20px;
}

.product-item {
  width: 100%;
}

/* 分页栏居中 */
.pagination-container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  margin-top: 20px;
}

@media (max-width: 768px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .product-list {
    grid-template-columns: 1fr;
  }
}
</style>
